<template>
  <div id="J_prismPlayer"></div>
</template>
<script setup>
import Aliplayer from 'aliyun-aliplayer'
import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
import { onMounted, nextTick } from 'vue'

onMounted(() => {
  nextTick(() => {
    var player = new Aliplayer(
      {
        id: 'J_prismPlayer',
        isLive: false, // 是否为直播播放。
        autoplay: true,
        playsinline: true,
        preload: true,
        useH5Prism: true,
        skinLayout: [
          {
            name: 'bigPlayButton',
            align: 'blabs',
            x: 30,
            y: 80,
          },
          {
            name: 'H5Loading',
            align: 'cc',
          },
          {
            name: 'errorDisplay',
            align: 'tlabs',
            x: 0,
            y: 0,
          },
          {
            name: 'infoDisplay',
          },
          {
            name: 'tooltip',
            align: 'blabs',
            x: 0,
            y: 56,
          },
          {
            name: 'thumbnail',
          },
          {
            name: 'controlBar',
            align: 'blabs',
            x: 0,
            y: 0,
            children: [
              {
                name: 'playButton',
                align: 'tl',
                x: 15,
                y: 12,
              },
              {
                name: 'timeDisplay',
                align: 'tl',
                x: 10,
                y: 7,
              },
              {
                name: 'fullScreenButton',
                align: 'tr',
                x: 10,
                y: 12,
              },
              {
                name: 'subtitle',
                align: 'tr',
                x: 15,
                y: 12,
              },
              {
                name: 'setting',
                align: 'tr',
                x: 15,
                y: 12,
              },
              {
                name: 'volume',
                align: 'tr',
                x: 5,
                y: 10,
              },
            ],
          },
        ],
        source: 'https://artplayer.org/assets/sample/video.mp4', // 播放地址，可以是第三方点播地址，或阿里云点播服务中的播放地址。
      },
      function (player) {
        const video = document.getElementById('J_prismPlayer').querySelector('video')
        video.setAttribute('muted', true)
      },
    )
    console.log(player)
  })
})
</script>

<style lang="scss" scoped>
#J_prismPlayer {
  width: 100%;
  height: 100%;
}
</style>
